<template>
  <div class="Invitation_code_list">
    <c-title text="生成记录" :hide="false"></c-title>
    <div class="topbg"></div>
    <div class="contenBox">
      <div class="summary">
        <div class="summary_lis">
          <div class="count">{{ summary.point }}</div>
          <div class="text">累计消耗{{fun.getCustomTextLang('member_center.credit1','积分')}}</div>
        </div>
        <div class="summary_lis">
          <div class="count">{{ summary.amount }}</div>
          <div class="text">累计消耗金额（元）</div>
        </div>
      </div>
      <div class="list">
        <div class="lis" v-for="item in info" :key="item.id">
          <div class="top_title">{{ item.code }}</div>
          <div class="lis_box">
            消耗{{fun.getCustomTextLang('member_center.credit1','积分')}}：
            <div class="txt">{{ item.point }}</div>
          </div>
          <div class="lis_box">
            消耗手续费金额：
            <div class="txt">{{ item.amount }}</div>
          </div>
          <div class="lis_box time">生成时间：{{ item.created_at }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      info: [],
      summary: [],
      page: 1,
      total_page: 0,
      isLoadMore: true
    };
  },
  activated() {
    this.getSummary();
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.info = [];
    },
    async getSummary() {
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.code.summary", {});
      if (result) {
        this.summary = data;
      } else {
        this.$toast(msg);
      }
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.code.index", {});
      if (result) {
        this.info = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.code.index", { page: this.page });
        this.isLoadMore = true;
        if (result) {
          this.info = this.info.concat(data.data);
        } else {
          this.page = this.page -1;
          this.$toast(msg);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.topbg {
  width: 100%;
  height: 4.94rem;
  background: linear-gradient(180deg, #f15353 0%, #f5f5f5 100%);
}
.contenBox {
  margin: 0 0.75rem;
  margin-top: -4rem;
  .list {
    margin-top: 0.63rem;
    .lis {
      background: #ffffff;
      border-radius: 0.5rem;
      padding: 0.81rem 0.75rem;
      padding-top: 0;
      box-sizing: border-box;
      margin-bottom: 0.5rem;
      .top_title {
        font-weight: bold;
        font-size: 0.88rem;
        color: #00001c;
        padding: 1.06rem 0;
        border-bottom: 1px solid #f0f0f1;
        text-align: left;
      }
      .lis_box {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 0.94rem;
        font-size: 0.81rem;
        .txt {
          color: #f15353;
        }
      }
    }
  }
  .summary {
    height: 4.41rem;
    background: #ffffff;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .summary_lis {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .count {
        font-size: 0.94rem;
        font-weight: bold;
      }
      .text {
        font-size: 0.75rem;
        color: #6e6e79;
      }
    }
  }
}
</style>
